<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天猫首页</title>
    <script>

        let number = 1;

        function lun_dow() {

            number++;
            if (number > 2) {
                number = 1;
            }
            let dow_img = document.getElementById("kong");
            dow_img.src = `img/dow_${number}.png`;
        }


        setInterval(lun_dow, 2000);


        let number1 = 1;

        function lun_top() {
            number1++;
            if (number1 > 4) {
                number1 = 1;
            }
            let top_img = document.getElementById("top_img");
            top_img.src = `img/top_${number1}.jpg`
        }

        setInterval(lun_top, 2000);


    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;

        }



        .header {

            height: 36px;
            background-color: #F2F2F2;

        }

        .header_center {
            width: 1200px;
            margin: 0px auto;
            line-height: 36px;
            font-size: 13px;
            color: #999999;
        }

        .header_center a {
            color: #999999;
            margin-left: 20px;
            text-decoration: none;
        }

        .data_right {
            float: right;
        }

        .data_right li {
            list-style: none;
            float: left;
            margin-left: 20px;
            line-height: 36px;
        }

        .sreach_center {
            margin: 0px auto;
            width: 1200px;

        }

        .sreach_right {
            border: 3px solid red;
            float: right;
            margin-top: 50px;


        }

        #sousuo_text {
            width: 400px;
            height: 30px;

            border: none;
        }

        #sousuo {
            height: 30px;
            width: 80px;
            background-color: red;
            color: white;
            border: none;
            margin-left: -3px;
            margin-top: 1px;
        }

        .type::after,
        .type::before {
            content: '';
            display: table;
            clear: both;
        }

        .type_center {
            margin: 0px auto;
            width: 1200px;
        }

        .type_center span {
            float: left;
            font-size: 25px;
            background-color: #DD2727;
            width: 311px;
            text-align: center;
            color: white;

        }

        .type_center div {
            float: left;
            height: 30px;
        }

        .type_center li {
            float: left;
            list-style: none;
            line-height: 30px;
        }

        .type_center a {
            text-decoration: none;
            color: black;
            margin-left: 30px;
        }

        .main {
            background-color: #F5F5F5;


        }

        .main::after, .main::before {
            content: '';
            display: table;
            clear: both;
        }

        .main_center {
            margin: 0px auto;
            width: 1200px;

        }

        .main_c_left_left {
            background-color: black;
            width: 100px;
            font-size: 20px;
            text-align: center;
            color: white;
            float: left;

        }

        .main_c_left_left li {
            margin: 35px auto;
            list-style: none;
        }

        .main_c_left_right {
            background-color: #F5F5F5;
            float: left;
            width: 200px;
            height: 500px;
            padding: 5px;
        }

        .main_c_left_right a {
            float: left;
            margin-left: 10px;
        }

        .main_c_left_right div {

        }

        .fix {
            margin-top: 15px;
            border-bottom: 1px solid;
            padding-bottom: 7px;


        }

        .fix a {
            list-style: none;
            text-decoration: none;
            color: #999999;
        }

        .fix::after, .fix::before {
            content: '';
            display: table;
            clear: both;
        }

        .main_c_content {
            float: left;
        }

        .main_c_right {
            float: left;
        }

        .after::after, .after:before {
            content: '';
            display: table;
            clear: both;
        }

        .after_center {
            margin: 0px auto;
            width: 1200px;

            margin-top: 50px;

        }

        .after_center img {
            width: 296px;
        }

        li {
            list-style: none;
        }

        .after_dow ul {
            float: left;
            margin-left: 100px;
            margin-top: 40px;
            font-size: 13px;
            color: #8B8B8B;
        }

        .after_dow ul li:first-child {
            font-size: 20px;
            color: black;
        }

        #ma_img {
            width: 200px;
            height: 200px;
        }

        .floor {
            border-top: 1px solid red;
            background-color: black;
            color: white;
        }

        .floor_center {
            margin: 0px auto;
            width: 1200px;

        }
        .floor_c_1{
            padding-bottom: 10px;
        }
        .floor_c_2{
            padding-bottom: 7px;
        }
        .floor_c_1 span {
            margin: 0px 10px;
            font-size: 13px;

        }

        .floor_c_2 span {

            font-size: 13px;

        }
        .floor_c_3 span {
            margin: 0px 20px;
            font-size: 13px;
            color: #A4A4A4;
        }
        .floor_c_4 span {
            margin: 0px 30px;
            font-size: 13px;
            color: #A4A4A4;
        }
        .floor_c_5 span {
            margin: 0px 30px;
            font-size: 13px;
            color: #A4A4A4;
        }
        .floor_c_6 span {
            margin: 0px 30px;
            font-size: 13px;
            color: #A4A4A4;
        }
        .floor_c_7 span {
            margin: 0px 30px;
            font-size: 13px;
            color: #A4A4A4;
        }
        .floor_center span:first-child{
            margin-left: 0px;;
        }
        a:hover {
            color: pink;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header_center">
        <i>喵，欢迎来天猫</i>
        <a href="javascript:void(0);">请登录</a>
        <a href="javascript:void(0);">免费注册</a>
        <div class="data_right">
            <ul>
                <li>我的淘宝</li>
                <li>购物车</li>
                <li>收藏夹 &nbsp;&nbsp;|</li>
                <li>手机版</li>
                <li>淘宝网</li>
                <li>商家支持</li>
                <li>网站导航</li>
            </ul>
        </div>
    </div>
</div>
<div class="sreach">
    <div class="sreach_center">
        <img src="img/tianmao.png" alt="">
        <div class="sreach_right">
            <input type="text" id="sousuo_text">
            <button id="sousuo">搜索</button>
        </div>
    </div>
</div>
<div class="type">
    <div class="type_center">
        <span>商品服务分类</span>

        <div>
            <ul>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
                <li><a href="javascript:void(0);">尚天猫</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="main_center">
        <div class="main_c_left">
            <div class="main_c_left_left">
                <ul>
                    <li>女装</li>
                    <li>女装</li>
                    <li>女装</li>
                    <li>女装</li>
                    <li>女装</li>
                    <li>女装</li>
                    <li>女装</li>
                    <li>女装</li>
                </ul>
            </div>
            <div class="main_c_left_right">
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
                <div class="fix">
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                    <a href="">卫衣</a>
                </div>
            </div>
        </div>


        <div class="main_c_content">
            <div>
                <img id="top_img" src="img/top_1.jpg" alt="" width="700px" height="350px">
            </div>
            <div>
                <img id="kong" src="img/dow_1.png" alt="" width="700px" height="">
            </div>
        </div>

        <div class="main_c_right">
            <img src="img/12.jpg" alt="" height="525px" width="190px">
        </div>
        <div>
            <img src="img/17.jpg" alt="" width="1200px">
        </div>
    </div>
</div>
<div style="height: 20px"></div>
<hr>
<div class="after">
    <div class="after_center">
        <span><img src="img/after_4.png" alt=""></span>
        <span><img src="img/after_3.png" alt=""></span>
        <span><img src="img/after_2.png" alt=""></span>
        <span><img src="img/after_1.png" alt=""></span>
        <hr>
        <div class="after_dow">
            <ul>
                <li>购物指南</li>
                <li>免费注册</li>
                <li>开通支付宝</li>
                <li>重置支付宝</li>
            </ul>
            <ul>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
            </ul>
            <ul>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
            </ul>
            <ul>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
                <li>天猫保障</li>
            </ul>
            <ul>
                <li>天猫保障</li>

                <li><img src="img/26.png" alt="" id="ma_img"></li>
            </ul>
        </div>
    </div>
</div>
<hr>
<div class="floor">
    <div class="floor_center">
        <div class="floor_c_1">
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
            <span>关于天猫</span>
        </div>
        <div class="floor_c_2">
            <span>阿里巴巴集团 | </span>
            <span>淘宝 | </span>
            <span>天猫 | </span>
            <span>聚划算 | </span>
            <span>全球买通 | </span>
            <span>阿里巴巴集团交易市场 | </span>
            <span>1688 | </span>
            <span>阿里妈妈 | </span>
            <span>肥猪 | </span>
            <span>阿里云计算 | </span>
            <span>AliOS | </span>
            <span>阿里通讯 | </span>
            <span>万网 | </span>
            <span>高德 | </span>
            <span>UC | </span>
            <span>有耳 | </span>
            <span>虾米 | </span>
            <span>钉钉 | </span>
            <span>支付宝 | </span>
            <span>阿里安全 | </span>
        </div>
        <div class="floor_c_3">
                <span>增值电信业务经营许可证： 浙B2-20110446</span>
                <span>市场名称登记证：工商网市字3301004119号</span>
                <span>出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号</span>
        </div>
        <div class="floor_c_4">
                <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                <span>互联网药品信息服务资质证书编号：浙-（经营性）-2017-0005</span>
                <span><img src="img/20.png" alt="">浙公网安备 33010002000120号</span>
        </div>
        <div class="floor_c_5">
            <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</span>
        </div>
        <div class="floor_c_6">
            <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</span>
            <span>12318举报</span>
        </div>
        <div class="floor_c_7">
            <span>© 2003-2020 TMALL.COM 版权所有</span>
        </div>
    </div>
</div>
</body>
</html>